<template>
  <div
    class="widget-statistic-board relative flex flex-wrap color-white align-end"
    :class="{ 'flex-reverse': direction === 'right' }"
  >
    <div
      :style="{ width: blockWidth, height: blockHeight }"
      class="statistic-block black-bg hover-active-alpha relative pointer no-select"
      :class="{ active: selected === index }"
      v-for="({ type, color, title, content, unit }, index) in list"
      :key="index"
      @click.stop="$emit('click', list[index])"
    >
      <div class="statistic-block-title flex align-center sub-title">
        <div
          :class="`${type}-bg`"
          class="title-indicator round"
          :style="`background-color:${color}`"
        />
        {{ title }}
      </div>
      <div
        class="statistic-block-content absolute position-rb big-number number-color"
      >
        {{ content }} <span class="sub-title color-white">{{ unit }}</span>
      </div>
    </div>
    <div
      v-show="list.length && showMore"
      class="widget-statistic-board-more black-bg hover-active-alpha sub-title text-center pointer no-select"
      @click="$emit('more')"
    >
      更多
    </div>
  </div>
</template>

<script>
export default {
  name: "WidgetStatisticBoard",
  props: {
    showMore: {
      type: Boolean | undefined,
      default: false,
    },
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    selected: {
      default: "",
    },
    direction: {
      type: String,
      default: "left",
    },
    blockWidth: {
      type: String,
      default: "160px",
    },
    blockHeight: {
      type: String,
      default: "72px",
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.widget-statistic-board {
  &:hover {
    .widget-statistic-board-more {
      transform: translateY(0px);
      opacity: 1;
    }
  }
  .widget-statistic-board-more {
    padding: 12px;
    height: 38px;
    margin: 0px 10px 10px 0px;
    transform: translateY(-30px);
    opacity: 0;
    transition: all 0.25s;
  }
  .statistic-block {
    flex-shrink: 0;
    margin: 0px 10px 10px 0px;
    .statistic-block-title {
      padding: 14px 0px 0px 14px;
      .title-indicator {
        width: 7px;
        height: 7px;
        margin-right: 8px;
      }
    }
    .statistic-block-content {
      padding: 0px 12px 12px 0px;
    }
  }
}
</style>
